<template>
	<view class="container">
		<!-- <plublic-navbar :is-back="true" :title="title" :background="background"></plublic-navbar> -->
		<u-sticky  :offset-top="0">
		<view class="tabsBox u-flex"  :style="'padding-top:'+top/3.5+'px'">
			<!-- <u-tabs
				@click="changCid"
			    :list="catelist"
			    lineWidth="30"
			    lineColor="#25D59F"
				:current="current"
			    :activeStyle="{
			        color: '#000000',
			        fontWeight: 'bold',
			        transform: 'scale(1.05)'
			    }"
			    :inactiveStyle="{
			        color: '#606266',
			        transform: 'scale(1)'
			    }"
			    itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
			>
			</u-tabs> -->
			<view class="tabs" :class="{'curr':current==index}" v-for="(item,index) in catelist" :key="index" @click="changCid(item)">
				{{item.name}}
			</view>
		</view>
		</u-sticky>
<view>
		<!-- <web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/web-view.html"></web-view> -->
	</view>
		<view class="pagebox">
			<view class="list12">
				<view class="item" v-for="item in list" :key="item.id" @click="openFile(item)">
					<!-- <navigator :url="'/pages/article/detail?id=' + item.id" hover-class=""> -->
					<view class="li">
						<u-image width="690rpx" height="280rpx" mode="scaleToFill"  radius="10rpx" made="spacFit" :src="item.images"></u-image>
					</view>
		
					<!-- </navigator> -->
				</view>
				<view class="" style="height: 100vh; background: #f2f2f2; padding-top: 100rpx;" v-if="list.length == 0">
					<u-empty mode="list" :icon="`${imgUrl}Elist.jpg`">
					</u-empty>
				</view>
				
			</view>
		</view>
	<tab-bar :currindex="currindex"></tab-bar>
	</view>
</template>

<script>
	import {
		getPageList
	} from '../../common/api.js';
	export default {
		data() {
			return {
				webviewStyles: {
									progress: {
										color: '#FF3333'
									}
								},
				baseUrl:uni.$u.http.config.baseURL,
				imgUrl:uni.$u.http.config.imgUrl,
				background:'#ffffff',
				title:'新闻资讯',
				top:0,
				id:0,
				type:1,
				pageno:1,
				pageSize:10,
				total_pages:0,
				loading: true,
				currindex:3,
				current:1,
				catelist: [{
									id:1,
				                    name: '知识'
				                }, {
									id:2,
				                    name: ' 活动',
				                   
				                }],
				         

				list:[
				]
			}
		},
		onShow() {
			console.log(this)
			uni.hideTabBar({
					animation:false
				})
		},
		onLoad(opt) {
			// if(opt.refresh === 'true'){
				
			// }
			console.log(opt.refresh)
			this.current = opt.curr
			if(opt.id){
				this.id=opt.id;
				this.getList();
			}else{
				uni.navigateBack({
					delta:1
				})
			}
			
			let that =this
			uni.getStorage({
				key: 'top',
				success: function (res) {
					that.top = res.data;
					console.log(res.data);
				}
			});
			uni.$u.sleep(2000).then(() => {
							this.loading = false
						})
		},
		onPullDownRefresh() {
				// console.log('refresh');
				const that = this
				setTimeout(function () {
					uni.stopPullDownRefresh();
					// that.getHomeProduc()
					// that.pageno=1
				}, 1000);
			},
		onReachBottom() {
			if(this.pageno < this.total_pages){
				this.pageno ++;
				this.getList()
			}
			
			// console.log('滑动到距离底部100px的时候触发,可以放 。。业务逻辑',this.pageno);
		  },
		// 滚动监听事件
		  //   onPageScroll(object)
		  //   {	
				// //this.show = object.scrollTop >= this.scrollTop;
				// let scrollTop = object.scrollTop;
				// if(scrollTop > 40){
				// 	this.background="#69adf5";
				// }else{
				// 	this.background="#ffffff";
				// }
				
		  //       console.log('开始滚动',object.scrollTop)
		  //       this.isShowLog = 2
		  //       // 只要滚动就清除状态
		  //       clearTimeout(this.timer)
		  //       // 告知标识 -> 开始滚动
		  //       this.flag = false
		  //       // 检测是否停留了 N 秒
		  //       // 如果停留则表示滚动结束
		  //       // N: 500(定时器时间 毫秒) -> 0.5秒算停止滚动
		  //       // 滚动后多长时间算停止滚动
		  //       this.timer = setTimeout(() => {
		  //           // console.log('结束滚动')
		  //           this.isShowLog = 0
		  //           // 告知标识 -> 结束滚动
		  //           this.flag = true; 
		  //       }, 500);
		  //   },
		methods: {
			goPage(e){
				// console.log(this.globals)
				// return 
				// uni.navigateTo({
				// 	url: e
				// })
				this.globals.linkJump({
				  url:e,
				  callback: () => {
				    uni.setStorageSync('pagelist',e)
				  }
				});
				// uni.navigateTo({
				// 	url: e
				// })
			},
			async getList(){
				let data={
					categoryId: this.id,
					pageNo: this.pageno,
					pageSize: this.pageSize
				}
				await getPageList({params:data}).then(res=>{
					this.total_pages = Math.ceil(res.total/10)
					this.list = this.list.concat(res.list)
				}).catch(err=>{
					
				})
			},
			changCid(item){
				this.id=item.id
				if(item.id == 1){
					
						let url='/pages/finds/index?id=1'
						// this.goPage(url)
						uni.switchTab({
							url:url
						})
				}else{
					this.list=[]
					this.getList()
				}
				// this.getList()
			},
			openFile(item) {
				console.log(item)
				let url = "/pages/finds/activity_detail?id=" + item.id
				this.goPage(url)
			}
		}
	}
</script>

<style lang="scss">
	.container{
		background: #ffffff;
		padding:0rpx 30rpx 30rpx 30rpx
	}
	.tabsBox{
		padding: 30rpx 0;
		    background: #ffffff;
		    margin-bottom: 10px;
		    margin-left: -30rpx;
		    margin-right: -30rpx;
		.tabs{
			font-size: 28rpx;
			color: #000000;
			position: relative;
			padding: 0 30rpx;
		}
		.tabs.curr::after{
			position: absolute;
			left: 30%;
			bottom: -20rpx;
			width: 40%;
			height: 8rpx;
			background: #25D59F;
			border-radius: 5rpx;
			z-index: 1;
			content:""
		}
		.tabs.curr{
			font-size: 32rpx;
			font-weight: bold;
		}
	}
.list12{
		.item{
			background-color: #fff;
			border-radius: 24rpx;
			padding: 0;
			margin-bottom: 20rpx;
			.li{
				width: 100%;
				overflow: hidden;
			}

		}
	
}
</style>
